之前在第三篇的安全策略中提到 Chrome Extension 禁止了 eval 的使用,
這篇就來提一下如何利用 HTML5 的新特性來繞過它吧！

manifest.json

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.0",
   "browser_action": {
      "default_popup": "index.html"
   }
}

index.html

        <title>ironman6</title>
        <style>
        	body {width: 500px;}
    		#content {width: 100%; height: 300px;}
    		#output {border-style: outset;}
    	</style>
    
    
        <textarea id="content">var test = [];
for(var i = 0; i < 10; i++){
    test.push( i + '<br/>');
}
document.querySelector('#output').innerHTML = test.join('');</textarea>
        <button id="runJSg">Run(Global)</button>
        <button id="runJSc">Run(Closure)</button>
        <div id="output">output</div>
        <script src="app.js"></script>
    

app.js

document.addEventListener('DOMContentLoaded', function () {
	document.querySelector('#runJSg').addEventListener('click', global);
	document.querySelector('#runJSc').addEventListener('click', closure);
});

var content = document.querySelector('#content');

function global() {
	runJS(content.value);
}

function closure() {
	runJS("(function(){" + content.value + "}())");
}

function runJS(content) {
	var blob = new Blob([content], {type: 'text/javascript'});
	var jsSrc = window.URL.createObjectURL(blob);
	var js = document.createElement('script');
	js.setAttribute('src', jsSrc);
	document.body.appendChild(js);
	window.URL.revokeObjectURL(jsSrc);
	js.parentElement.removeChild(js);
}

這個技巧是使用 Blob Url 的方式,
將程式碼轉成 Blob 後, 藉由 createObjectURL 產生對應的 Url,
而產生的 url 開頭是 blob: , 因此也不用擔心受到 内容安全策略(CSP) 的限制,
所以就能順利的把 JS 放到 body 裡讓他執行啦~